<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 视图层 -->
    <div id="app">
        <p>{{str}}</p>
        <p>{{num}}</p>
        <p>{{bool}}</p>
    </div>

    <!-- {{str}} -->
</body>
<script>
    // Vue的特征
    // 1. 声明式渲染
    //    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：(可以理解为new Vue创建Vue实例时,会将#app元素内的html结构作为模版, 将数据(data)拼接到模版中, 渲染为DOM)
    //    {{}} => 文本插值 => 在标签对的内部使用 => 将数据拼接到标签内

    // 2. 响应式  => 当数据发生改变时, 视图也会重新渲染(跟新)

    console.log(Vue);


    // new Vue(options)     Vue实例/Vue应用/组件
    // options Vue实例的配置项,Vue中的绝大部分功能都依赖于此配置项实现的
    //    el   挂载的元素(将当前Vue实例和#app元素绑定) 
    //    data 挂载的数据


    // 注意:
    // 1. Vue中的绝大部分功能都依赖于new Vue(options) options配置项实现的
    // 2. 挂载的数据只能在挂载的元素中使用  => 作用域(当前Vue实例  -> 从当前实例中查找)
    // 3. 


    // 声明式渲染
    // app ->  application(应用)    => 控制层
    var app = new Vue({  // 创建Vue实例
        el:"#app",   // 挂载的元素
        data:{ // 数据层 => 对应属性名将属性值 拼接到模版语法中
            str:"hello Vue",
            num:100,
            bool:true,
        }
    })



    //  2. 响应式  => 当数据发生改变时, 视图也会重新渲染(跟新)

    // Vue实例的相关属性
    // $el  => 挂载的元素
    // $data => 挂载的数据
    // $option => 配置项

    // 如何改变数据? 
    // a. 通过Vue实例的$data属性修改
    // b. 通过Vue实例对于属性名修改

    console.log('Vue实例',app);
    console.log('Vue实例',app.$el);
    console.log('Vue实例',app.$data);
    console.log('Vue实例',app.$data.str);
    console.log('Vue实例',app.str);


   
    // setTimeout(()=>{
    //     app.$data.str = "Vue hello";
    //     app.$data.num = 200;
    //     app.$data.bool = false;
    // },2000);

     // 为了获取和修改数据更加方便, Vue实例中也会绑定同名属性, 此属性的取值和赋值都依赖于$data上的对应属性
    setTimeout(()=>{
        app.str = "Vue hello";  // app.str => app.$data.str;
        app.num = 200;
        app.bool = false;
    },2000);


   




</script>
</html>